<template>
  <div>
    <!-- 头部 -->
    <heads></heads>
    <!-- 头部  end-->
    <div class="setting_content">
      <!-- top -->
      <div class="top">
        <div class="top_left">
          <ul>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-share"></i>&nbsp;&nbsp;管理角色权限</li>
          </ul>
        </div>
        <!--<div class="top_right">-->
          <!--<ul>-->
            <!--<li><a href="">x</a></li>-->
            <!--<li><a href="">+</a></li>-->
            <!--<li><a href="">-</a></li>-->
          <!--</ul>-->
        <!--</div>-->
      </div>
      <div class="contentBody">
        <div class="RoleList">
          <ul>
            <li class="RoleItem" v-for="item,index in rolelist" @click="changeRole(item.id)">
              <i></i>
              <p :class="{navcolor:changeColor === item.id}">{{item.title}}</p>
            </li>
          </ul>
        </div>
        <div class="RoomGL">
          <ul v-for="itemss,index in menutypelist">
            <li class="RoomItemTitle">
              <i class="Icon_Room"></i>
              <p :class="{navcolor:changeColorSec === itemss.id}" @click="secclick(itemss.id)">{{itemss.title}}</p>
            </li>
            <li v-show="secShow === itemss.id" class="RoomGLItem" v-for="vv in itemss.children">
              <p :class="{navcolor:changeColorTree === vv.id}" @click="contentF(vv.id)">
                {{vv.title}}
              </p>
            </li>
          </ul>
        </div>
        <div class="TablesList">
          <table border="1">
            <tr v-for="(items,index) in contentList">
              <td class="tableT">
                <label>
                  <input type="checkbox" :value="items.id" v-model="items.checked" name="sign" class="inck"/>
                  <span>{{items.title}}</span>
                </label>
              </td>

              <td class="tableD" v-show="items.allow_scope">
                <select :id="items.id" v-model="items.scope">
                  <option v-for="item in items.allow_scope" :value="item.id" v-text="item.title"></option>
                </select>
              </td>
              <td class="tableD">
                <span v-for="(titles,index) in items.children">
                  <input type="checkbox" class="inck ffff" v-model="titles.checked" @click="checkdsubmit(titles.id)"
                         :value="titles.id" v-bind:true-value="1" v-bind:false-value="0"/>
                  <span>{{titles.title}}</span>
                </span>
              </td>
            </tr>
          </table>
        </div>
        <div class="bttBTN">
          <input type="button" @click="Addroles" value="添加角色">
          <!--<input style="left:90%; " type="button" value="恢复默认权限">-->
          <input style="left:60%; " type="button" @click="authsubmit" value="保存角色">
        </div>
      </div>
    </div>
    <!-- footer -->
    <footers></footers>
    <!-- footer end-->
    <!--提示弹框-->
    <div v-show="submitShow">
      <Modal :ModalClose="Closesubmit" :message="message" :pushTo="pushTo"></Modal>
    </div>
    <!--添加角色-->
    <div v-show="AddrolesShow">
      <Addroles :LDmodal="opensunmit" :getRoleList="getRoleList" :ids="sid" :HfollwClose="openHfollw"></Addroles>
    </div>
  </div>
</template>
<script>
  import heads from './head';
  import footers from './footer';
  import Modal from './modal.vue';
  import Addroles from './Addroles' //添加角色
  export default {
    name: "PerSetting",
    components: {
      footers,
      heads,
      Modal,
      Addroles //添加角色
    },
    data() {
      return {
        submitShow:false,
        AddrolesShow:false,
        message: '',
        pushTo: '',
        checkList: [],
        contentLists: [],
        // titles: [],
        // checked: 0,
        contentList: [],//列表数据
        rolelist: [],//角色数据
        menutypelist: [],//操作数据
        changeColor: 1,//动态获取样式
        changeColorSec: 1,
        changeColorTree: 4,
        secShow: 0,
        rule_ids: 1,
        scope: 1,
        checkedList: [],
        newchecked: [],
        sid: 0,//添加角色
        umber: ''
      }
    },
    methods: {
      // 打开提示弹窗
      opensunmit(){
        this.message = this.$store.state.messageString;
        this.submitShow = true
      },
      Closesubmit() {
        this.message = '';
        this.pushTo = '';
        this.submitShow = false
      },
      checkdsubmit(id) {
      },
      rule_id(id) {
      },
      // 保存权限
      authsubmit() {
        let incks = document.getElementsByClassName('inck');
        let d = [];
        let scope = 1;
        for (let i = 0; i < incks.length; i++) {
          let doc = document.getElementById(incks[i].value);
          if (doc != null && doc.value !== '') {
            scope = doc.value;
          } else {
            scope = '1';
          }
          d.push({
            rule_id: incks[i].value,
            checked: incks[i].checked ? 1 : 0,
            scope: scope
          });
        }
        let submitData = {
          role_id: this.changeColor,
          rules: d
        };
        this.$http.post('/index/auth', submitData).then(res => {
          this.$store.state.messageString = res.data.msg;
          this.pushTo = '';
          this.opensunmit();
        }).catch(err => {
          console.log(err)
        })
      },
      //添加角色
      Addroles: function (id) {
        this.sid = id;
        this.AddrolesShow = !this.AddrolesShow
      },
      openHfollw: function () {
        this.AddrolesShow = !this.AddrolesShow
      },
      // 列表数据
      contentF(id) {
        let that = this;
        that.changeColorTree = id;
        that.$http.get('/index/auth', {
          params: {
            type_id: that.changeColorTree,
            role_id: that.changeColor
          }
        }).then(res => {
          that.contentList = res.data

        }).catch(err => {
          console.log(err)
        })
      },
      secclick(id) {
        if (this.secShow === id) {
          this.secShow = -1;
        } else {
          this.secShow = id;
          this.changeColorSec = id
        }
      },
      changeRole(id) {
        this.changeColor = id;
        this.contentList = [];
        this.secShow = -1;
        this.changeColorSec = -1;
        this.changeColorTree = -1
      },
      getRoleList(){
        let that = this;
        that.$http.get('/index/role', {}).then(res => {
          console.log(res,'---------');
          this.rolelist = res.data;
          this.changeColor = res.data[0].id;
        }).catch(err => {
          console.log(err)
        });
        that.$http.get('/index/auth/menu_type', {}).then(res => {
          that.menutypelist = res.data;
        }).catch(err => {
          console.log(err)
        })
      }
    },
    computed: {
      // childrenList(){
      //     return this.contentList.map(v => v.children)
      // },
      // allow_scopeList(){
      //     return this.contentList.map(v => v.allow_scope)
      // }
    },
    created() {
      this.getRoleList();
    },
  }
</script>

<style scoped>
  .setting_content {
    margin-top: 80px;
  }
  .navcolor {
    color: red;
  }
  .top {
    width: 100%;
    height: 27px;
    /* background: url(../assets/img/top_bg.jpg); */
    background-color: #f2f6fc;
  }
  /* 头部 */
  .top_right {
    width: 1000px;
    margin: 0 auto;
  }
  .top_right li {
    float: right;
    width: 70px;
    line-height: 27px;
    left: 48%;
    position: relative;
  }
  .top_right li a {
    font-size: 0.8rem;
    color: #8e8e8e;
  }
  .top_rightli a:link,
  .top_right a:visited {
    color: #000;
  }
  .top_right li a:hover,
  .top_right a:active {
    color: red;
  }
  .top_left {
    width: 40%;
    float: left;
    height: 28px;
    color: #8e8e8e;
    line-height: 27px;
  }
  .top_left i {
    font-size: 1.2rem;
    color: peru;
  }
  /* 管理 */
  .Administrator {
    width: 15%;
    margin-top: 10px;
    height: 80%;
    left: 5px;
    background: #ffffff;
    border: 1px solid #8e8e8e;
    position: absolute;

    overflow: hidden;
  }
  .Administrator_data {
    padding: 0 35px;
    margin-top: 20px;
  }
  .Housing {
    width: 15%;
    height: 80%;
    left: 16%;
    margin-top: 10px;
    position: absolute;
    background: #ffffff;
    border: 1px solid #8e8e8e;
  }
  .Administrator_p {
    line-height: 30px;
  }
  /* .Housing_f{
    margin-top: 20px;
  }
  .Housing_x{
    line-height: 21
  } */
  .bg {
    width: 30%;
    height: 80%;
    left: 30%;
    margin-top: 10px;
    position: absolute;
    background: #ffffff;
    border: 1px solid #8e8e88;
  }
  /* 通用样式 */
  *,
  ::before,
  ::after {
    /*font-size: 14px;*/
    /*  */
    margin: 0;
    padding: 0;
    /* 点击高亮效果 */
    /* 手指点击 清除默认的 高亮效果 透明 */
    -webkit-tap-highlight-color: transparent;
    /* 盒子模型 */
    /* 样式输入完毕 在后面tab */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* 统一设置文字  sans-serif 移动端 的默认字体 */
    font-family: "Microsoft YaHei", sans-serif;
  }
  body {
    background: #fff;
  }
  /* input标签 去掉默认样式 */
  input {
    /*border: none;*/
    /*-webkit-appearance: none;*/
  }
  /* a标签的下划线 */
  a {
    text-decoration: none;
  }
  /* 去掉小圆点 */
  ol,
  ul {
    list-style: none;
  }
  /* 清除浮动 */
  .clearfix::before,
  .clearfix::after {
    content: "";
    display: block;
    line-height: 0;
    height: 0;
    visibility: hidden;
    clear: both;
  }
  @media screen and (min-width: 320px) {
    html,
    body {
      font-size: 10.24px;
    }
  }
  @media screen and (min-width: 360px) {
    html,
    body {
      font-size: 11.52px;
    }
  }
  @media screen and (min-width: 375px) {
    html,
    body {
      font-size: 12px;
    }
  }
  @media screen and (min-width: 385px) {
    html,
    body {
      font-size: 12.32px;
    }
  }
  @media screen and (min-width: 400px) {
    html,
    body {
      font-size: 12.8px;
    }
  }
  @media screen and (min-width: 414px) {
    html,
    body {
      font-size: 13.248px;
    }
  }
  @media screen and (min-width: 424px) {
    html,
    body {
      font-size: 13.568px;
    }
  }
  @media screen and (min-width: 480px) {
    html,
    body {
      font-size: 15.36px;
    }
  }
  @media screen and (min-width: 540px) {
    html,
    body {
      font-size: 17.28px;
    }
  }
  @media screen and (min-width: 640px) {
    html,
    body {
      font-size: 20.48px;
    }
  }
  @media screen and (min-width: 720px) {
    html,
    body {
      font-size: 23.04px;
    }
  }
  @media screen and (min-width: 750px) {
    html,
    body {
      font-size: 24px;
    }
  }
  @media screen and (min-width: 800px) {
    html,
    body {
      font-size: 25.6px;
    }
  }
  .contentBody {
    width: 100%;
    height: 100%;
    padding: 10px 10px;
    background-color: #f9f9f9;
    overflow: hidden;
  }
  .RoleList {
    width: 16%;
    min-height: 25rem;
    border-radius:10px;
    border: 1px solid #317cba;
    background-color: #fff;
    float: left;
  }
  .RoleList ul {
    width: 100%;
  }
  .RoleList ul .RoleItem {
    width: 100%;
    overflow: hidden;
    padding-left: 0.6rem;
    margin-top: 0.5rem;
  }
  .RoleList ul .RoleItem i {
    float: left;
    display: block;
    width: 1rem;
    height: 1rem;
    background: url(../assets/img/Administartors.png);
    background-size: 1rem, 1rem;
  }
  .RoleList ul .RoleItem p {
    font-size: 0.5rem;
    margin-top: 0.2rem;
    margin-left: 1.2rem;
  }
  .RoleItem{
    cursor: pointer;
  }
  .RoomItemTitle{
    cursor: pointer;
  }
  .navcolor{
    cursor: pointer;
  }
  .RoomGL {
    float: left;
    width: 16%;
    height: 100%;
    border-radius:10px;
    border: 1px solid #317cba;
    margin-left: 10px;
    background-color: #fff;
    min-height: 25rem;
  }
  .RoomGL ul {
    width: 100%;
  }
  .RoomGL ul .RoomItemTitle {
    width: 98%;
    overflow: hidden;
    margin-top: 0.5rem;
    margin-left: 0.3rem;
  }
  .RoomGL ul .RoomItemTitle p {
    margin-top: 0.1rem;
    font-size: 0.6rem;
    /*color: #1296db;*/
    padding-left: 1.2rem;
  }
  .RoomGL ul .RoomItemTitle .Icon_Room {
    float: left;
    width: 1rem;
    height: 1rem;
    display: block;
    background: url(../assets/img/Room.png);
    background-size: 1rem, 1rem;
  }
  .RoomGL ul .RoomItemTitle .Icon_GL {
    float: left;
    width: 1rem;
    height: 1rem;
    display: block;
    background: url(../assets/img/Administartors1.png);
    background-size: 1rem, 1rem;
  }
  .RoomGL ul .RoomItemTitle .Icon_YW {
    float: left;
    width: 1rem;
    height: 1rem;
    display: block;
    background: url(../assets/img/Business.png);
    background-size: 1rem, 1rem;
  }
  .RoomGL ul .RoomItemTitle .Icon_SysSet {
    float: left;
    width: 1rem;
    height: 1rem;
    display: block;
    background: url(../assets/img/SetUp.png);
    background-size: 1rem, 1rem;
  }
  .RoomGL ul .RoomGLItem {
    width: 100%;
    height: 1.1rem;
    margin-top: 0.2rem;
  }
  .RoomGL ul .RoomGLItem button {
    border: none;
    background: #fff;
  }
  .RoomGL ul .RoomGLItem button:focus {
    border: none;
    background: #fff;
    outline: 0;
    color: red;
  }
  .RoomGL ul .RoomGLItem p {
    text-align: center;
    font-size: 0.5rem;
    line-height: 1rem;
  }
  .RoomGL ul .RoomGLItemSelect {
    width: 100%;
    height: 1.1rem;
    background-color: #ebfcff;
    margin-top: 0.2rem;
    border-left: 2px solid #317cba;
  }
  .RoomGL ul .RoomGLItemSelect p {
    text-align: center;
    font-size: 0.5rem;
    line-height: 1rem;
  }
  .TablesList {
    width: 65.6%;
    float: left;
    margin-left: 10px;
    overflow: hidden;
  }
  .TablesList table {
    width: 100%;
    border-collapse: collapse;
  }
  .TablesList table tr {
    height: 1rem;
  }
  .TablesList table .inck {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
  }
  .TablesList table .tableT {
    width: 40%;
    padding-left: 0.8rem;

  }
  .tableT span{
    cursor: pointer;
    text-align: left;
    position: absolute;
  }
  .TablesList table .tableD {
    width: 60%;
    background: #fff;
  }
  .TablesList table .tableD .inck {
    margin-left: 0rem;
  }
  .TablesList table .tableD select {
    margin-left: 12rem;
    width: 4rem;
    cursor: pointer;
  }
  .bttBTN {
    width: 100%;
    overflow: hidden;
    padding-top: 0.6rem;
  }
  .bttBTN input {
    width: 5.5rem;
    height: 1rem;
    border: 1px solid #1296db;
    height: 30px;
    border-radius:5px;
    background-color: #ebfcff;
    color: #317cba;
    margin-left: 0.6rem;
    cursor: pointer;
  }
</style>
